<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        :no-btn="dialogObj.showType === 2 ? true : false"
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
        width="80%"
      >
        <return-car ref="childRef" :init-data.sync="dialogObj.initData"></return-car>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
import dictObj from '@/store/dictData'
import utils from 'utils'
import ReturnCar from './return-car'

export default {
  name: 'orderShare',
  mixins: [mixinTable],
  components: {
    CDialog,
    ReturnCar
  },
  data(vm) {
    return {
      // 对话框对象
      dialogObj: {},
      returnImgageList: [],
      // 表格内操作按钮
      tableInnerBtns: [
        {
          name: '结单',
          icon: 'el-icon-refresh',
          width: 230,
          notBtn: row => row.status !== 'useCar',
          handle(row) {
            const { orderId, carNumber } = row
            vm.showDialog({
              initData: {
                returnTheCarStatus: 1,
                returnCarCause: '',
                orderId // 订单id
              },
              title: `结单(${carNumber})`
            })
          }
        },
        {
          name: '车况图片',
          icon: 'el-icon-view',
          handle(row) {
            const { orderId, carNumber } = row
            vm.routerLink(`/order/review-share/${orderId}/${carNumber}`)
          }
        },
        {
          name: '证件图片',
          icon: 'el-icon-view',
          handle(row) {
            const { memberPhone, memberName } = row
            vm.routerLink(`/order/share-identity/card/${memberPhone}/${memberName}`)
          }
        }
      ],
      tableHeader: [
        {
          label: '订单编号',
          prop: 'orderId',
          fixed: true,
          width: 270,
          search: {
            type: 'input'
          }
        },
        {
          label: '所属城市',
          prop: 'cityName',
          width: 100
          // search: {
          //   type: 'dict',
          //   optionsList: dictObj.cityList
          // }
        },
        {
          label: '所属企业',
          prop: 'companyName'
        },
        {
          label: '车牌号码',
          prop: 'carNumber',
          width: 110,
          search: {
            type: 'input',
            prop: 'lpn'
          }
        },
        {
          label: '会员名称',
          prop: 'memberName',
          width: 100,
          search: {
            type: 'input'
          }
        },
        {
          label: '会员手机号码',
          prop: 'memberPhone',
          width: 120,
          search: {
            type: 'input'
          }
        },
        {
          label: '订单状态',
          prop: 'status',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.status, 'orderStatus'),
          search: {
            type: 'dict',
            optionsList: dictObj.orderStatus
          }
        },
        {
          label: '预约时间',
          prop: 'orderTime',
          width: 160
          // search: {
          //   type: 'dateTime',
          //   prop: 'dateTime'
          // }
        },
        {
          label: '开始时间',
          prop: 'beginTime',
          width: 160
          // search: {
          //   type: 'dateTime',
          //   prop: 'dateTime'
          // }
        },
        {
          label: '结束时间',
          prop: 'endTime',
          width: 160
          // search: {
          //   type: 'dateTime',
          //   prop: 'dateTime'
          // }
        },
        {
          label: '车辆网点',
          prop: 'parkName',
          search: {
            type: 'input'
          }
        },
        {
          label: '还车网点',
          prop: 'returnParkName',
          search: {
            type: 'input'
          }
        },
        {
          label: '订单类型',
          prop: 'orderCategory',
          width: 100,
          formatter: row => (row && row.orderCategory === 'TS' ? '时租' : '长租')
        },
        {
          label: '总里程(KM)',
          prop: 'totalMileage',
          width: 100
        },
        {
          label: '总里程花费(元)',
          prop: 'totalMileageMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.totalMileageMoney)
        },
        {
          label: '总时长(分)',
          prop: 'totalMinute',
          width: 100
        },
        {
          label: '租车前电量(%)',
          prop: 'battery',
          width: 120
        },
        {
          label: '租车后电量(%)',
          prop: 'returnBattery',
          width: 120
        },
        {
          label: '总时长金额(元)',
          prop: 'totalMinuteMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.totalMinuteMoney)
        },
        {
          label: '夜间优惠金额(元)',
          prop: 'nightDiscountsMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.nightDiscountsMoney)
        },
        {
          label: '网点折扣金额(元)',
          prop: 'parkDiscountMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.parkDiscountMoney)
        },
        {
          label: '不计免赔(元)',
          prop: 'insuranceMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.insuranceMoney)
        },
        {
          label: '总优惠金额(元)',
          prop: 'totalDiscountMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.totalDiscountMoney)
        },
        {
          label: '优惠券编号',
          prop: 'couponNo'
        },
        {
          label: '优惠券金额(元)',
          prop: 'couponMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.couponMoney)
        },
        {
          label: '总费用金额(元)',
          prop: 'totalPayMoney',
          width: 130,
          formatter: row => row && utils.formatMoney(row.totalPayMoney)
        },
        {
          label: '支付金额(元)',
          prop: 'payMoney',
          width: 100,
          formatter: row => row && utils.formatMoney(row.payMoney)
        },
        {
          label: '支付方式',
          prop: 'payCategory',
          width: 100,
          formatter: row => (row && row.payCategory ? (row.payCategory === 'B' ? '余额' : '微信支付') : '')
        },
        {
          label: '支付状态',
          prop: 'payStatus',
          width: 100,
          formatter: row => (row && row.payStatus ? (row.payStatus === 'finish' ? '已支付' : '未支付') : ''),
          search: {
            type: 'dict',
            optionsList: dictObj.payStatus
          }
        },
        {
          label: '结单原因',
          prop: 'returnCarCause'
        },
        {
          label: '后台结单',
          prop: 'returnTheCarStatus',
          formatter: row => (row && row.returnCarCause ? '强制' : '正常'),
          width: 100
        },
        {
          label: '结单操作人员',
          prop: 'returnCarPerson',
          width: 120
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.order
        .fetch('timeShareAllHistoryOrderList', {
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        title: opts.title || '结单',
        initData: opts.initData
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const params = childRef.formModel
          if (!params.parkId) {
            return this.$msgTip('请先选择还车网点', 'warning')
          }
          if (params.returnTheCarStatus === 0 && !params.returnCarCause) {
            return this.$msgTip('请填写强制还车原因', 'warning')
          }
          this.$api.order.fetch('returnTheCar', params).then(() => {
            this.responeHandle('还车成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
  .image-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    .image {
      cursor: pointer;
    }
  }
}
</style>
